<template>
  <u-popup
    mode="center"
    v-model="showPopup"
    :z-index="999"
    safe-area-inset-bottom
    :maskCloseAble="true"
    border-radius="24"
  >
    <div class="popup-box">
      <div
        class="u-p-t-24 u-p-b-24 u-m-b-46 font-w-600 u-font-32 u-text-center"
      >
        绑定用户关系
      </div>
      <div class="popup-content flex-col flex-y-center">
        <div class="flex-y-center flex-x-center">
          <div class="flex-col flex-x-center flex-y-center" style="width: 200rpx">
						<image class="user-img" v-if="parent_avatar" :src="parent_avatar"></image>
            <div
							v-else
              class="user-img flex-x-center flex-y-center font-w-600 color-999 font-50"
            >
              ?
            </div>
            <div class="color-999 u-font-24 u-m-t-24 u-line-1 u-text-center" style="width: 100%"  :class="{fontDel: !parent_nickname}">{{ parent_nickname || '暂无' }}</div>
          </div>
        </div>
        <div class="input-box u-m-t-48">
          <u-input
            v-model="parent_mobile"
            placeholder="请输入上级手机号码绑定上级"
            placeholder-style="font-size:28rpx;"
            height="40"
						@blur="mobileInputBlur"
          ></u-input>
        </div>

        <div :class="['confirm-bt', disabledBt && 'disabled-bt']" @click="onCLick">确认绑定</div>
      </div>
    </div>
  </u-popup>
</template>

<script>
import { getUserInfoByMobile } from "@/api/login";
export default {
  data() {
    return {
      showPopup: false,
			parent_avatar: '',
			parent_nickname: '',
			parent_mobile: '',
			parent_id: 0
    };
  },
  computed: {
    disabledBt() {
      return !this.$u.test.mobile(this.parent_mobile);
    },
  },
  methods: {
    switchShowPopup() {
      this.showPopup = !this.showPopup;
    },
		onCLick() {
			setTimeout(() => {
				if (!this.$u.test.mobile(this.parent_mobile)) {
					uni.showToast({
					  title: '请输入正确的手机号',
					  icon: "none",
					  duration: 1000,
					});
					return;
				}
				
				if (this.parent_id == 0) {
					uni.showToast({
					  title: '请输入正确的手机号',
					  icon: "none",
					  duration: 1000,
					});
					return;
				}
				
				uni.showModal({
				  title: '提示',
				  content: '确认绑定('+ this.parent_nickname +')为您的上级吗?',
				  success: res => {
				    if (res.confirm) {
							this.showPopup = false;
				      this.$emit('login');
				    }
				  },
				});
			}, 500);
		},
		async mobileInputBlur() {
			if (this.parent_mobile == '') {
				return;
			}
			if (!this.$u.test.mobile(this.parent_mobile)) {
				uni.showToast({
				  title: '请输入正确的手机号',
				  icon: "none",
				  duration: 1000,
				});
				return;
			}
			uni.showLoading({
			  title: '查询中',
			});
			const res = await getUserInfoByMobile({
			  mobile: this.parent_mobile
			});
			uni.hideLoading();
			if (res.data.id == 0) {
				uni.showToast({
				  title: '未找到此用户',
				  icon: "none",
				  duration: 1000,
				});
				return;
			}
			
			this.parent_avatar = res.data.avatar_url;
			this.parent_nickname = res.data.nickname;
			this.parent_id = res.data.id;
			uni.setStorageSync('parent_user_id', res.data.id);
		}
  },
  options: {
    styleIsolation: "shared",
  },
};
</script>

<style lang="scss" scoped>
.font-50 {
  font-size: 50rpx;
}
.popup-box {
  padding: 0 48rpx 48rpx;
  width: 600rpx;
  .user-img {
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    background: #f2f2f2;
  }
  .icon-lianjie {
    font-size: 50rpx;
    transform: translateY(-24rpx);
  }
  .input-box {
    width: 100%;
    /deep/.u-input {
      background-color: #f2f2f2;
      border-radius: 20rpx;
      padding: 24rpx!important;
    }
  }

  .confirm-bt {
    margin-top: 48rpx;
    width: 444rpx;
    border-radius: 100rpx;
    background: #f0250e;
    line-height: 76rpx;
    text-align: center;
    font-weight: 600;
    color: #fff;
  }
  .disabled-bt {
    background: #f2f2f2;
    color: #999;
  }
}
</style>
